.app {
  padding: .2rem;

  .head {
    display: flex;
    width: 100%;
    height: 1.2rem;
    border-bottom: 1px solid #f0f0f0;

    ul {
      width: 100%;
      display: flex;

      li {
        display: flex;
        width: 33.3%;
        justify-content: center;
        align-self: center;
        font-size: .34rem;
        font-weight: 700;


        a:hover {
          color: blue;
          font-size: .32rem;
        }
      }
    }
  }

  .calculation {
    display: flex;
    width: 100%;
    height: 1.2rem;
    border-bottom: 1px solid #f0f0f0;

    ul {
      width: 100%;
      display: flex;

      li:nth-of-type(1) {
        display: flex;
        width: 30%;
        justify-content: center;
        align-self: center;
        font-size: .32rem;
        font-weight: 700;
      }

      li {
        display: flex;
        width: 35%;
        justify-content: center;
        align-self: center;

        input {
          display: flex;
          justify-content: center;
          align-self: center;
        }

        span {
          font-size: .32rem;
        }
      }
    }
  }

  .amount {
    width: 100%;
    display: flex;
    height: 1.2rem;
    border-bottom: 1px solid #f0f0f0;

    ul {
      width: 100%;
      display: flex;
      font-size: .32rem;

      li:nth-of-type(1) {
        display: flex;
        width: 30%;
        font-size: .32rem;
        justify-content: center;
        align-self: center;
        font-weight: 700;
      }

      li:nth-of-type(2) {
        input {
          display: flex;
          width: 80%;
          border: 0px;
          outline: none;
        }

        display: flex;
        width: 70%;
        justify-content: center;
        align-self: center;
      }
    }
  }

  .years {
    width: 100%;
    display: flex;
    height: 1.2rem;
    border-bottom: 1px solid #f0f0f0;

    ul {
      width: 100%;
      display: flex;
      font-size: .32rem;

      li:nth-of-type(1) {
        display: flex;
        width: 30%;
        justify-content: center;
        align-self: center;
        font-weight: 700;
      }

      li:nth-of-type(2) {
        display: flex;
        width: 70%;

        span:nth-of-type(1) {
          display: flex;
          width: 80%;
          padding-left: .2rem;
          justify-content: left;
          align-self: center;
        }

        span:nth-of-type(2) {
          display: flex;
          width: 20%;
          font-size: .32rem;
          padding-left: .3rem;
          justify-content: right;
          align-self: center;
        }
      }
    }
  }

  .theWay {
    width: 100%;
    display: flex;
    height: 1.2rem;
    border-bottom: 1px solid #f0f0f0;

    ul {
      width: 100%;
      display: flex;
      font-size: .32rem;

      li:nth-of-type(1) {
        display: flex;
        width: 30%;
        justify-content: center;
        align-self: center;
        font-weight: 700;
      }

      li:nth-of-type(2) {
        display: flex;
        width: 70%;

        span:nth-of-type(1) {
          display: flex;
          width: 80%;
          padding-left: .2rem;
          justify-content: left;
          align-self: center;
        }

        span:nth-of-type(2) {
          display: flex;
          width: 20%;
          font-size: .32rem;
          padding-left: .3rem;
          justify-content: right;
          align-self: center;
        }
      }
    }
  }

  .lpr {
    display: flex;
    width: 100%;
    height: 50px;
    background-color: #f5f8ff;

    span {
      color: white;
      display: flex;
      width: 10%;
      height: .4rem;
      font-size: .1rem;
      background-color: blue;
      justify-content: center;
      align-self: center;

    }

    p:nth-of-type(1) {
      width: 75%;
      display: flex;
      justify-content: center;
      align-self: center;
      font-size: .04rem;
    }

    p:nth-of-type(2) {
      color: blue;
      font-weight: 700;
      width: 15%;
      height: .4rem;
      display: flex;
      justify-content: center;
      align-self: center;
      font-size: .1rem;

    }
  }

  .interestRate {
    width: 100%;
    display: flex;
    height: 1.2rem;
    border-bottom: 1px solid #f0f0f0;

    ul {
      width: 100%;
      display: flex;
      font-size: .32rem;

      li:nth-of-type(1) {
        display: flex;
        width: 30%;
        justify-content: center;
        align-self: center;
        font-weight: 700;
      }

      li:nth-of-type(2) {
        display: flex;
        width: 70%;

        span:nth-of-type(1) {
          display: flex;
          width: 80%;
          padding-left: .2rem;
          justify-content: left;
          align-self: center;
        }

        span:nth-of-type(2) {
          display: flex;
          width: 20%;
          font-size: .32rem;
          padding-left: .3rem;
          justify-content: right;
          align-self: center;
        }
      }
    }
  }

  .but {
    padding-top: .8rem;
    display: flex;

    button {
      color: white;
      width: 100%;
      height: 1rem;
      background-color: #3072f6;
      border-radius: 10px;
      border: 0px;
      font-size: .4rem;
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    align-self: center;
    width: 4rem;
    height: .8rem;
    margin: 40px auto;


    span {
      color: blue;
      display: flex;
      justify-content: center;
      align-self: center;
      font-size: .24rem;
      padding: 0 .1rem;

    }
  }


}